<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{  /* 大盒子  */
            height: 930px;
            width: 1240px;
            margin-left: auto;
            margin-right: auto;
            border: 1px solid #333;
            display: flex;
        }
        .parent-left{ /* 左边盒子  */
            flex: 3;
            border: 1px solid #333;
        }
        .child-a{  /* 左-第一行  */
            display: flex;
        }
        .child-a>.one{
            flex:2;  /* 2倍大小 */
            border-right: 1px solid #333; 
            border-bottom: 1px solid #333;
        }
        .child-a>.two{
            flex: 1; /* 正常大小 */
            border-bottom: 1px solid #333;
            height: 310px;
        }
        .child-b{ /* 左-第二行 */
            display: flex;
        }
        .child-b>.three{
            flex: 1; 
            border-right: 1px solid #333;
            border-bottom: 1px solid #333;
            height: 310px;
            flex-direction: column;
            display: flex;
        }
        .child-b>.three>.frist-1{ /*  */
            flex: 1;
        }
        .child-b>.three>.frist-2{
            flex: 1;
            border-top: 1px solid #333;
        }

        .child-b>.four{
            flex: 1;
            border-bottom: 1px solid #333;
        }
        .child-b>.five{
            flex: 1;
            border-left: 1px solid #333;
            border-bottom: 1px solid #333;
        }
        .child-c{  /*  左-第三行 */
            display: flex;
        }
        .child-c>.six{
            flex: 1; 
            border-right: 1px solid #333;
            height: 306px;
        }
        .child-c>.seven{
            flex: 1;
        }  
        .child-c>.eight{
            flex: 1;
            border-left: 1px solid #333;
        }  
        .parent-right{ /* 右边大盒子  */
            flex: 1;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="parent-left">
            <div class="child-a">
                <div class="one"></div>
                <div class="two"></div>
            </div>
            <div class="child-b">
                <div class="three">
                    <div class="frist-1"></div>
                    <div class="frist-2"></div> 
                </div>
                <div class="four"></div>
                <div class="five"></div>
            </div>
            <div class="child-c">
                <div class="six"></div>
                <div class="seven"></div>
                <div class="eight"></div>
            </div>
        </div>
        <div class="parent-right">
            
        </div>
    </div>
</body>
</html>